<?php
/* Map Boundary
 * Google Map API 3
 * Please change your key to meet your server
 * by Tubagus Rafi Kusuma
 */

//$territory_array = array();
//$ter_array = array();
//$terr = "";
//if($this->input->post("territory")) {
//    $v = 1;
//    $terr = "";
//    foreach($this->input->post("territory") as $x) {
//        if($v <> 1) {
//            $terr .= ",";
//        }
//        $terr .= $x;
//        //$territory_array[] = $x;
//        $v++;
//    }
//echo $terr;
//$ter_array = array_unique($territory_array);
//}

if($this->input->post("territory")) {
    $terr = $this->input->post("territory");
}else {
    $terr = 1;
}
?>
<link rel="stylesheet" type="text/css" href="<?=base_url()?>file/js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<?=base_url()?>file/js/easyui/themes/icon.css" />
<script type="text/javascript" src="<?=base_url()?>file/js/easyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>file/js/easyui/jquery.easyui.min.js"></script>
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0JhNTyjMpdmUPMDYWIVuE57dUIHZH1SU&sensor=true"></script>-->
<script type="text/javascript" src="<?=$api?>"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var val = [<?= $terr ?>];
        $('#cc').combotree('setValue', val);
        
    });
</script>
<script>

$("#li").hide();    

</script>
<div class="box">
     <!-- box / title -->
        <div class="title">
            <h5>Teritori > Perbatasan Teritori</h5>
            <ul class="links">
                <?php               
                
                /*if($this->mgis->getStatusTerritoryUser() == false) {
                    $link = "";
                }else {
                    $link = "<li><a href='". base_url()."index.php/". $this->uri->segment(1)."/manage'>Kelola Perbatasan</a></li>";
                }
                echo $link;*/
                ?>
                                        
            </ul>
        </div>
        <form id="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
            <div class="form">
                <div class="fields">
                    <div class="field">
                        <div class="label">
                                <label for="user">Teritori:</label>
                        </div>
                         <div class="input">
                                <input id="cc" name="territory" class="easyui-combotree" url="<?= base_url()?>index.php/gis/territory_json" cascadeCheck="false" style="width:200px;">                                                
                        </div>
                    </div>
                    <div class="buttons">
                        <input type="submit" name="submit" value="Tampilkan" />                                     
                    </div>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            
            (function() {
                window.onload = function() {
                // Creating a map
                var options = {
                zoom: 5,
                center: new google.maps.LatLng(-1.9112665350965847,117.7294921875),
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
                var map = new google.maps.Map(document.getElementById('map'), options);
                var myInfowindow = new google.maps.InfoWindow();
                // Adding a LatLng object for each city
                <?php
                $bound = "";
                if($hasil != null) {
                    
//                    if($tr != null) {
//                        foreach($this->input->post("territory") as $tr) {
                            $ter = $this->mgis->getTerritoryMember($this->input->post("territory"));                   
                    
                            if($ter != null) {
                                $i = 0;

                                foreach($ter as $r) {
                                    $this->mgis->pathTer = "";
                                    $hal = $this->mgis->getBoundaryTerritory($r);
                                    $bound = "";
                                    $x = 0;
                                    if($hal != null) {
                                        foreach($hal as $v) {
                                            if($x <> 0) {
                                                $bound .= ",";
                                            }                       
                                            $bound .= "new google.maps.LatLng(".$v->lat.",".$v->lon.")";

                                            $x++;
                                        }   

                                    $ret = $this->mgis->getTerritoryById($r);
                                    $territory_name = $this->mgis->getParentTerritory($r);
                                    //$territory_name = $ret['territory_name'];
                                    $fill_color = $ret['fill_color'];
                                    if($fill_color == "") {
                                        $fill_color = "000000";
                                    }else {
                                        $fill_color = $ret['fill_color'];
                                    }

                                    $border_color = $ret['border_color'];
                                    if($border_color == "") {
                                        $border_color = "000000";
                                    }else {
                                        $border_color = $ret['border_color'];
                                    }

                                    ?>
                                     var bound<?=$i?> = [<?= $bound ?>];               
                                    // Creating the polyline object
                                    var polygon<?=$i?> = new google.maps.Polygon({
                                        path: bound<?=$i?>,
                                        strokeColor: "#ff0000",
                                        strokeOpacity: 0.7,
                                        strokeWeight: 1,
                                        fillColor: '#<?=$fill_color?>',
                                        strokeColor: '#<?=$border_color?>'
                                    });
                                    // Adding the polyline to the map
                                    polygon<?=$i?>.setMap(map);    

                                    // Add a listener for the click event
                                    google.maps.event.addListener(polygon<?=$i?>, 'click', function(e) {
                                        var vertices = this.getPath();
                                        var contentString = "<b><?=$territory_name?></b><br />";

                                        // Iterate over the vertices.
                                        for (var i =0; i < vertices.length; i++) {
                                          var xy = vertices.getAt(i);
                                        }

                                        // Replace our Info Window's position
                                        myInfowindow.setContent(contentString);
                                        myInfowindow.setPosition(e.latLng);
                                        myInfowindow.open(map);
                                    });


                                   // Adding mouseover event to the polygon
                                    google.maps.event.addListener(polygon<?=$i?>, 'mouseover', function(e) {
                                    // Setting the color of the polygon to blue
                                    polygon<?=$i?>.setOptions({
                                        fillColor: '#0000ff',
                                        strokeColor: '#0000ff'
                                    });
                                    });

                                    // Adding mouseover event to the polygon
                                    google.maps.event.addListener(polygon<?=$i?>, 'mouseout', function(e) {
                                    // Setting the color of the polygon to blue
                                    polygon<?=$i?>.setOptions({
                                        fillColor: '#<?=$fill_color?>',
                                        strokeColor: '#<?=$border_color?>'
                                    });
                                    });

                                    <?php                            
                                    }
                                    $i++;
                                }

                            }
//                        }
//                    }                                        
                                                                
                }
                ?>                          
                   
                };
                })();
                               
        </script>
        
<div id="map" style="width:98%;height:700px;margin:10px;border:1px solid #000000;"></div>
</div>